<template>
  <div class="entrance">
    <!-- <a-button @click="login">申报</a-button>
        <a-button @click="login1">后台</a-button> -->
    <header-cont :page="loginstatus == 'unlogin' ? '' : 'login'"></header-cont>
    <div class="main">
      <div class="main_left">
        <div class="main_left_cont main_left_cont_notice">
          <div class="cont_header">
            <div class="name">
              <img src="@/assets/img/tzgg_title.png" />
              <!--<span>通知公告</span>-->
            </div>
            <div class="more" @click="moreFn(0)">
              <span>更多</span>
              <img src="@/assets/img/more.png" />
            </div>
          </div>
          <ul class="cont_list">
            <li @click="viewDetail(item.id)" class="cont_li" v-for="(item, index) in dataList" :key="index">
              <span class="notice_title">{{ item.tzggZbt }}</span>
              <span class="notice_date">{{ item.createTime }}</span>
            </li>
          </ul>
        </div>
        <div class="main_left_cont main_left_cont_ziliao">
          <div class="cont_header">
            <div class="name">
              <img src="@/assets/img/zlzx_title.png" />
              <!--<span>资料中心</span>-->
            </div>
            <div class="more" @click="moreFn(1)">
              <span>更多</span>
              <img src="@/assets/img/more.png" />
            </div>
          </div>
          <ul class="cont_list">
            <li class="cont_li" @click="downloadZl(item.filePath, item.zlMc)" v-for="(item, index) in zlList"
              :key="index">
              <span class="notice_title">{{ item.zlMc }}</span>
              <!-- <span class="notice_date">{{item.createTime}}</span> -->
            </li>
          </ul>
        </div>
      </div>
      <div class="main_right">
        <div class="main_right_cont">
          <a-tabs size="large" default-active-key="1">
            <a-tab-pane key="1">
              <span slot="tab">成果申报</span>
              <div class="enter_cont">
                <ul>
                  <li @click="handleResult(item.fl_bh, item.fl_mc, item)" v-for="(item, index) in cxjsbList"
                    :key="index"
                    :class="['pointer', index == 0 ? 'technology' : index == 1 ? 'administration' : index == 2 ? 'information' : index == 3 ? 'standard' : index == 4 ? 'patent' : '']">
                    <div class="port_tit">{{ item.fl_mc }}</div>
                    <div class="port_time">
                      <p>申报开始时间：{{ item.is_valid === 'Y' ? item.sb_kssj.slice(0, 10) : '待定' }}</p>
                      <p>申报结束时间：{{ item.is_valid === 'Y' ? item.sb_jzsj.slice(0, 10) : '待定' }}</p>
                    </div>
                  </li>
                </ul>
              </div>
            </a-tab-pane>
            <a-tab-pane key="2" force-render>
              <span slot="tab">成果推荐</span>
              <a-form :form="form" class="user-layout-login" ref="formLogin" id="formLogin">
                <a-form-item>
                  <a-input size="large"
                    v-decorator="['username', validatorRules.username, { validator: this.handleUsernameOrEmail }]"
                    type="text" placeholder="请输入帐户名">
                    <a-icon slot="prefix" type="user" :style="{ color: 'rgba(0,0,0,.25)' }" />
                  </a-input>
                </a-form-item>
                <a-form-item>
                  <a-input v-decorator="['password', validatorRules.password]" size="large" type="password"
                    autocomplete="false" placeholder="密码">
                    <a-icon slot="prefix" type="lock" :style="{ color: 'rgba(0,0,0,.25)' }" />
                  </a-input>
                </a-form-item>
                <a-row :gutter="0">
                  <a-col :span="16">
                    <a-form-item>
                      <a-input v-decorator="['inputCode', validatorRules.inputCode]" size="large" type="text"
                        @change="inputCodeChange" placeholder="请输入验证码">
                        <a-icon slot="prefix" type="smile" :style="{ color: 'rgba(0,0,0,.25)' }" />
                      </a-input>
                    </a-form-item>
                  </a-col>
                  <a-col :span="8" style="text-align: right">
                    <img v-if="requestCodeSuccess" class="codeimg" :src="randCodeImage"
                      @click="handleChangeCheckCode" />
                    <img v-else class="codeimg" src="../../../assets/checkcode.png" @click="handleChangeCheckCode" />
                  </a-col>
                </a-row>
                <a-form-item>
                  <a-checkbox
                    v-decorator="['rememberMe', { initialValue: true, valuePropName: 'checked' }]">自动登录</a-checkbox>
                </a-form-item>
                <a-form-item>
                  <a-button size="large" type="primary" htmlType="submit" class="login-button"
                    @click.stop.prevent="handleSubmitTjdw" :loading="loginBtn" :disabled="loginBtn">确定</a-button>
                </a-form-item>
              </a-form>
            </a-tab-pane>
            <a-tab-pane key="3" force-render>
              <span slot="tab">专家评审</span>
              <a-form :form="form" class="user-layout-login" ref="formLogin" id="formLogin">
                <div name="短信登录" lable="短信登录" v-if="zjLoginType === 'phone'">
                  <a-form-item>
                    <a-input v-decorator="['mobile', validatorRules.mobile]" size="large" type="text" placeholder="手机号"
                      :maxLength="11">
                      <a-icon slot="prefix" type="mobile" :style="{ color: 'rgba(0,0,0,.25)' }" />
                    </a-input>
                  </a-form-item>
                  <a-row :gutter="0">
                    <a-col :span="16">
                      <a-form-item>
                        <a-input v-decorator="['inputCode', validatorRules.inputCode]" size="large" type="text"
                          @change="inputCodeChange" placeholder="请输入验证码">
                          <a-icon slot="prefix" type="smile" :style="{ color: 'rgba(0,0,0,.25)' }" />
                        </a-input>
                      </a-form-item>
                    </a-col>
                    <a-col :span="8" style="text-align: right">
                      <img v-if="requestCodeSuccess" class="codeimg" style="width:100%;cursor:pointer;"
                        :src="randCodeImage" @click="handleChangeCheckCode" />
                      <img v-else class="codeimg" src="../../../assets/checkcode.png" @click="handleChangeCheckCode" />
                    </a-col>
                  </a-row>
                  <a-form-item style="position:relative;">
                    <a-input v-decorator="['captcha', validatorRules.captcha]" size="large" type="text"
                      placeholder="请输入验证码">
                      <a-icon slot="prefix" type="mail" :style="{ color: 'rgba(0,0,0,.25)' }" />
                    </a-input>
                    <a-button class="getCaptcha" tabindex="-1" :disabled="state.smsSendBtn"
                      @click.stop.prevent="getCaptcha" type="link"
                      v-text="!state.smsSendBtn && '获取验证码' || (state.time + ' s')"></a-button>
                  </a-form-item>
                  <a-form-item>
                    <a-checkbox
                      v-decorator="['rememberMe', { initialValue: true, valuePropName: 'checked' }]">自动登录</a-checkbox>
                    <a class="forge-password" style="float: right;" value="账号登录" @click="handleAccountLogin">
                      账号登录
                    </a>
                  </a-form-item>
                </div>
                <div name="账号登录" lable="账号登录" v-else>
                  <a-form-item>
                    <a-input size="large"
                      v-decorator="['username_zj', validatorRules.username, { validator: this.handleUsernameOrEmail }]"
                      type="text" placeholder="请输入帐户名">
                      <a-icon slot="prefix" type="user" :style="{ color: 'rgba(0,0,0,.25)' }" />
                    </a-input>
                  </a-form-item>
                  <a-form-item>
                    <a-input v-decorator="['password_zj', validatorRules.password]" size="large" type="password"
                      autocomplete="false" placeholder="密码">
                      <a-icon slot="prefix" type="lock" :style="{ color: 'rgba(0,0,0,.25)' }" />
                    </a-input>
                  </a-form-item>
                  <a-row :gutter="0">
                    <a-col :span="16">
                      <a-form-item>
                        <a-input v-decorator="['inputCode', validatorRules.inputCode]" size="large" type="text"
                          @change="inputCodeChange" placeholder="请输入验证码">
                          <a-icon slot="prefix" type="smile" :style="{ color: 'rgba(0,0,0,.25)' }" />
                        </a-input>
                      </a-form-item>
                    </a-col>
                    <a-col :span="8" style="text-align: right">
                      <img v-if="requestCodeSuccess" class="codeimg" :src="randCodeImage"
                        @click="handleChangeCheckCode" />
                      <img v-else class="codeimg" src="../../../assets/checkcode.png" @click="handleChangeCheckCode" />
                    </a-col>
                  </a-row>
                  <a-form-item>
                    <a-checkbox
                      v-decorator="['rememberMe', { initialValue: true, valuePropName: 'checked' }]">自动登录</a-checkbox>
                    <a class="forge-password" style="float: right;" value="短信登录" @click="handleAccountLogin">短信登录</a>
                  </a-form-item>
                </div>
                <a-form-item>
                  <a-button size="large" type="primary" htmlType="submit" class="login-button"
                    @click.stop.prevent="handleSubmitZj" :loading="loginBtn" :disabled="loginBtn">确定</a-button>
                </a-form-item>
              </a-form>
            </a-tab-pane>
          </a-tabs>
        </div>
      </div>
    </div>
    <footer-cont></footer-cont>
    <achievements ref="achievements" :zlTime="zl_time" :flMc="fl_mc" :flBh="fl_bh" :flag="achievementsFlag"
      @declareAchievements="declareAchievements" />
  </div>
</template>

<script>
import { getAction } from '@/api/manage';
import { mapActions } from "vuex";
import {
  INDEX_MAIN_PAGE_PATH
} from '@/store/mutation-types'
import headerCont from '@/views/declarationSystem/common/header-login';
import footerCont from '@/views/declarationSystem/common/footer';
import achievements from '@/views/declarationSystem/achievements/index';
import {
  cxjsbPageList,
  sysCxjZlList,
  sysCxjFlCxjsbList,
  sysCxjZlDownload,
  cxjsbCheckFlSbsj, cxjsbAdd
} from '@/api/shenbao'
export default {
  name: 'Entrance',
  components: {
    headerCont,
    footerCont,
    achievements
  },
  data() {
    const validateMobile = (rule, value, callback) => {
      if (!value) {
        callback("请输入手机号");
      } else if (!new RegExp(/^1([38][0-9]|4[579]|5[0-3,5-9]|6[6]|7[0135678]|9[89])\d{8}$/).test(value)) {
        callback("您的手机号格式不正确!");
      } else {
        callback();
      }
    }
    return {
      achievementsFlag: false,
      fl_bh: '',
      fl_mc: '',
      zl_time: "",
      loginstatus: 'unlogin',
      dataList: [],
      zlList: [],
      cxjsbList: [],
      checked: false,
      randCodeImage: '',
      requestCodeSuccess: false,
      loginBtn: false,
      form: this.$form.createForm(this),
      zjLoginType: "username",
      state: {
        time: 60,
        smsSendBtn: false,
      },
      validatorRules: {
        username: {
          rules: [{
            required: true,
            message: '请输入用户名!'
          }, {
            validator: this.handleUsernameOrEmail
          }]
        },
        password: {
          rules: [{
            required: true,
            message: '请输入密码!',
            validator: 'click'
          }]
        },
        mobile: {
          rules: [{
            validator: validateMobile
          }]
        },
        captcha: {
          rule: [{
            required: true,
            message: '请输入验证码!'
          }]
        },
        inputCode: {
          rules: [{
            required: true,
            message: '请输入验证码!'
          }]
        }
      },
    }
  },
  mounted() {
    var islogin = sessionStorage.getItem('islogin');
    if (islogin == '1') {
      this.loginstatus = 'login';
    } else {
      var shenbao_phoneNumber = localStorage.getItem('shenbao_phoneNumber');
      var shenbao_passWord = localStorage.getItem('shenbao_passWord');
      if (shenbao_phoneNumber && shenbao_passWord) {
        this.codephone = shenbao_phoneNumber;
        this.codepwd = shenbao_passWord;
        this.checked = true;
      }
      this.loginstatus = 'unlogin';
    }
    this.getSysCxjFlCxjsbList();
    this.getList();
    this.getZlList();
    this.handleChangeCheckCode();
  },
  methods: {
    ...mapActions(['TjdwUserLogin', 'ZjUserYzmLogin', 'zjlogin']),
    handleAccountLogin() {
      if (this.zjLoginType == 'username') {
        this.zjLoginType = 'phone'
      } else {
        this.zjLoginType = 'username'
      }
    },
    declareAchievements(formData) {
      let that = this;
      cxjsbAdd(formData).then(res => {
        let data = res.data;
        if (data.success) {
          that.achievementsFlag = !that.achievementsFlag;
          that.$refs.achievements.handleCancel();
          that.$message.success('添加成功');
          that.$router.push({
            path: '/shenbao/declare',
            query: {
              type: that.fl_bh,
              cxj_cxj_id: data.result.id,
              isHead: 1,
              cxj_xmbh: data.cxj_xmbh,
              cxj_mc_zw: data.cxj_mc_zw
            }
          })
        } else {
          that.$message.error(res.data.message);
        }
      })
    },
    getCaptcha(e) {
      e.preventDefault();
      let that = this;
      this.form.validateFields(['mobile'], {
        force: true
      }, (err, values) => {
        if (!values.mobile) {
          that.cmsFailed("请输入手机号");
        } else if (!err) {
          this.state.smsSendBtn = true;
          let interval = window.setInterval(() => {
            if (that.state.time-- <= 0) {
              that.state.time = 60;
              that.state.smsSendBtn = false;
              window.clearInterval(interval);
            }
          }, 1000);
          const hide = this.$message.loading('验证码发送中..', 0);
          let smsParams = {};
          smsParams.phoneNumber = values.mobile;
          smsParams.code = that.inputCodeContent;
          smsParams.key = that.currdatetime;
          smsParams.type = "5";
          getAction("/cxj/sysCxjUser/cxjsb_getYzm", smsParams).then(res => {
            if (!res.success) {
              setTimeout(hide, 0);
              this.cmsFailed(res.message);
            }
            //   console.log(res);
            setTimeout(hide, 500);
          }).catch(err => {
            setTimeout(hide, 1);
            clearInterval(interval);
            that.state.time = 60;
            that.state.smsSendBtn = false;
            this.requestFailed(err);
          });
        }
      });
    },
    handleSubmitTjdw() {
      let that = this;
      that.loginBtn = true;
      that.form.validateFields(['username', 'password', 'inputCode', 'rememberMe'], {
        force: true
      }, async (err, values) => {
        if (err) {
          that.loginBtn = false;
          return;
        }
        try {
          const loginParams = {
            userName: values.username,
            passWord: this.passwordEncryption(values.password),
            remember_me: values.rememberMe,
            code: that.inputCodeContent,
            key: that.currdatetime
          };
          const res = await this.TjdwUserLogin(loginParams);
          that.loginBtn = false;
          sessionStorage.setItem('role', 1);
          sessionStorage.setItem('userName', res.result.userInfo.userName);
          that.$router.push({ path: INDEX_MAIN_PAGE_PATH });
        } catch (error) {
          that.requestFailed(error);
          that.loginBtn = false;
        }
      })
    },
    handleSubmitZj() {
      let that = this;
      that.loginBtn = true;
      if (that.zjLoginType == 'phone') {
        that.form.validateFields(['mobile', 'captcha', 'inputCode', 'rememberMe'], {
          force: true
        }, async (err, values) => {
          if (err) {
            that.loginBtn = false;
            return;
          }
          try {
            const loginParams = {
              remember_me: values.rememberMe,
              key: that.currdatetime,
              phoneNumber: values.mobile,
              code: values.captcha
            };
            const res = await this.ZjUserYzmLogin(loginParams);
            that.loginBtn = false;
            sessionStorage.setItem('role', 3)
            sessionStorage.setItem('userName', res.result.userInfo.userName)
            that.$router.push({ path: INDEX_MAIN_PAGE_PATH });
          } catch (error) {
            that.loginBtn = false;
            that.requestFailed(error);
          }
        })
      } else {
        that.form.validateFields(['username_zj', 'password_zj', 'inputCode', 'rememberMe'], {
          force: true
        }, async (err, values) => {
          if (err) {
            that.loginBtn = false;
            return;
          }
          try {
            const loginParams = {
              userName: values.username_zj,
              passWord: this.passwordEncryption(values.password_zj),
              remember_me: values.rememberMe,
              code: that.inputCodeContent,
              key: that.currdatetime
            };
            const res = await this.zjlogin(loginParams);
            that.loginBtn = false;
            sessionStorage.setItem('role', 3)
            sessionStorage.setItem('userName', res.result.userInfo.userName)
            that.$router.push({ path: INDEX_MAIN_PAGE_PATH });
          } catch (error) {
            that.loginBtn = false;
            that.requestFailed(error);
          }
        })
      }
    },
    passwordEncryption(passwordUser) {
      //后台公钥
      let publicKey = 'MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEAhkx+lJeZ2KbV+CZ2cFG2MpksTWPTyi3hQt+5Cb1S2NPSdT+1p3tkcO1+YRi2yHvmGsR58of3obr6ygHAMnLVB0+/1daHzY5FDNRb27sJuOEqD3Q1RiYAQfeYmxuEyM4g0TA2X4zkYeLFbKF8suhOVpMa+dp0TnLUA31eyxv+bDhY38T3xtgrJZxHZ2r28ncpdEHF2NNxK0nfAWBJnfcfs/35ESQtY4t2ExHEXRIQUZ2XBh1V9nM4PM2LlJy1xruN2tcTbFKFSJHrMp+Zso0iJJlD+qGISDOeLFGD/dETtqmLkmIJnsz0ARbos/mwAP0gc9Hd5mTpi8RSi8Px5dA26QIDAQAB'
      let encryptor = new JSEncrypt();
      encryptor.setPublicKey(publicKey);
      let passwordEncryp = encryptor.encrypt(passwordUser);
      return passwordEncryp;
    },
    requestFailed(err) {
      this.$notification['error']({
        message: '登录失败',
        description: ((err.response || {}).data || {}).message || err.message || "请求出现错误，请稍后再试",
        duration: 4,
      });
      this.loginBtn = false;
    },
    cmsFailed(err) {
      this.$notification['error']({
        message: "登录失败",
        description: err,
        duration: 4,
      });
    },
    handleChangeCheckCode() {
      this.currdatetime = new Date().getTime();
      getAction(`/sys/randomImage/${this.currdatetime}`).then(res => {
        if (res.success) {
          this.randCodeImage = res.result
          this.requestCodeSuccess = true
        } else {
          this.$message.error(res.message)
          this.requestCodeSuccess = false
        }
      }).catch(() => {
        this.requestCodeSuccess = false
      })
    },
    inputCodeChange(e) {
      this.inputCodeContent = e.target.value
    },
    handleUsernameOrEmail(rule, value, callback) {
      const regex = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((\.[a-zA-Z0-9_-]{2,3}){1,2})$/;
      if (regex.test(value)) {
        this.loginType = 0
      } else {
        this.loginType = 1
      }
      callback()
    },
    moreFn(ind) {
      this.$router.push('/shenbao/articleList?ind=' + ind)
    },
    // 获取申报列表
    getList() {
      cxjsbPageList().then(res => {
        if (res.data.success) {
          this.dataList = res.data.result.records;
        }
      })
    },
    // 获取资料中心列表
    getZlList() {
      sysCxjZlList().then(res => {
        if (res.data.success) {
          this.zlList = res.data.result.records;
        }
      })
    },
    // 跳转详情
    viewDetail(id) {
      this.$router.push({
        path: '/shenbao/innovationAwardNotice',
        query: {
          id
        }
      })
    },
    downloadZl(url, zlMc) {
      let that = this;
      let fileGs = url.split('.');
      sysCxjZlDownload(url).then(res => {
        that.downfn(zlMc, res, fileGs[1]);
      })
    },
    downfn(title, res, fileGs) {
      const data = res.data;
      const url = window.URL.createObjectURL(new Blob([data], {
        type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
      }))
      // const url = window.URL.createObjectURL(new Blob([data], {type: "application/octet-stream"}))
      const link = document.createElement('a')
      link.style.display = 'none'
      link.href = url;
      link.setAttribute('download', title + '.' + fileGs)
      document.body.appendChild(link)
      link.click()
      document.body.removeChild(link)
    },
    /* 优化开始 */
    getSysCxjFlCxjsbList() {
      sysCxjFlCxjsbList().then(res => {
        let data = res.data;
        if (data.success) {
          this.cxjsbList = data.result;
        }
      }).catch(err => {
        sessionStorage.clear();
        this.loginstatus = 'unlogin';
      })
    },
    handleResult(id, fl_mc, item) {
      let self = this;
      self.fl_bh = id;
      self.fl_mc = fl_mc;
      self.zl_time = item.sbnd;
      // if (id == '61') {
      //     window.open("https://zgcg.cec.org.cn/", '_blank')
      // } else {
      if (this.loginstatus === 'unlogin') {
        this.$router.push('/shenbao/login')
      } else {
        self.$confirm({
          title: `您当前选择的是${fl_mc}，请谨慎选择申报类别，一经确定后类别无法更改！`,
          onOk() {
            cxjsbCheckFlSbsj({
              fl_bh: id
            }).then(res => {
              let data = res.data;
              if (data.success) {
                if (data.result) {
                  self.achievementsFlag = !self.achievementsFlag;
                } else {
                  self.$message.warning('当前日期不在申报范围内');
                }
              } else {
                self.$message.warning(data.message);
              }
            })
          },
          onCancel() {
            console.log('Cancel');
          },
          class: 'test',
        });
      }
      // }
    },
  }
}
</script>

<style scoped lang='less'>
.entrance {
  width: 100%;
  background-color: #F7F7F7;

  // display: flex;
  // flex-direction: column;
  .main {
    width: 1210px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-top: 20px;
  }

  .main_left {
    width: 685px;
  }

  .cont_header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #EEEEEE;
    padding-left: 30px;
    padding-right: 32px;
    box-sizing: border-box;
    height: 52px;

    .name {
      height: 100%;
      display: flex;
      align-items: center;
      border-bottom: 2px solid #2381D6;

      span {
        margin-left: 11px;
        font-size: 20px;
        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
        font-weight: bold;
        color: #333333;
        line-height: 22px;
      }
    }

    .more {
      cursor: pointer;
      display: flex;
      align-items: center;

      span {
        margin-right: 8px;
        font-size: 16px;
        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
        color: #006DC0;
        line-height: 22px;
      }
    }
  }

  .main_left_cont {
    width: 685px;
    background: #FFFFFF;

    &.main_left_cont_notice {
      height: 306px;
    }

    &.main_left_cont_ziliao {
      height: 306px;
      margin-top: 20px;
    }

    &.main_left_cont_huojiang {
      height: 220px;
      margin-top: 20px;
    }

    .cont_list {
      padding-left: 18px;
      padding-right: 32px;
      box-sizing: border-box;
      height: 248px;
      overflow: hidden;

      .cont_li {
        height: 48px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid #EEEEEE;
        cursor: pointer;

        .notice_title {
          font-size: 16px;
          font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
          color: #4C5F82;
          line-height: 22px;
        }

        .notice_date {
          height: 22px;
          font-size: 16px;
          font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
          color: #4B5F82;
          line-height: 22px;
        }
      }
    }

    .search_cont {
      .search_input {
        display: flex;
        align-items: center;
        padding-left: 27px;
        padding-right: 33px;
        margin-top: 20px;

        .input_li {
          width: 195px;
          height: 50px;
          border-radius: 4px;
          position: relative;

          img {
            position: absolute;
            top: 16px;
            left: 15px;
          }

          input {
            width: 100%;
            height: 100%;
            text-indent: 23px;
            border: 1px solid #ECEBEB;
          }

          &:nth-of-type(1) {
            margin-right: 20px;
          }

          &:nth-of-type(2) {
            margin-right: 20px;
          }
        }
      }

      .search_btn {
        width: 160px;
        height: 46px;
        background: linear-gradient(90deg, #3D9CED 0%, #1A60C7 99%, #1A60C7 100%);
        border-radius: 5px;
        font-size: 22px;
        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
        color: #FFFFFF;
        line-height: 46px;
        text-align: center;
        margin: 20px auto 0;
        cursor: pointer;
      }
    }
  }

  .main_right {
    width: 506px;

    .main_right_cont {
      width: 506px;
      height: 632px;
      padding: 0 31px 0 37px;
      background: #FFFFFF;

      .ant-tabs-tab {
        font-size: 20px;
      }

      &.main_right_cont_login {
        height: 632px;
        padding: 0 36px;
        box-sizing: border-box;
      }

      &.main_right_cont_enter {
        height: 632px;
        padding: 0 31px 0 37px;
        box-sizing: border-box;
      }

      &.main_right_cont_set {
        height: 220px;
        margin-top: 20px;
      }
    }
  }

  .enter_tit {
    line-height: 48px;
    padding-top: 20px;
    color: #0a4174;
    font-size: 30px;

    span {
      font-size: 30px;

      &:nth-child(1) {
        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
        font-weight: 500;
      }

      &:last-child {
        margin-left: 20px;
        cursor: pointer;
      }
    }
  }

  .sbrk {
    width: 100%;
    height: auto;
    justify-content: space-between;

    li {
      position: relative;
      width: 400px;
      height: 140px;
      background-color: #2680eb;
      border-radius: 15px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      // margin-top: 40px;
      margin-bottom: 60px;

      &:nth-child(1) {
        // background: #2680eb;
        background: url('../../../assets/img/bg2.png') no-repeat;
        background-size: auto 100%;
      }

      &:nth-child(2) {
        background: url('../../../assets/img/bg1.png') no-repeat;
        background-size: auto 100%;
      }

      b {
        text-align: center;
        font-size: 30px;
        font-weight: normal;
        color: #ffffff;
        padding-right: 60px;
        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
      }

      img {
        width: 80px;
        height: 80px;
        position: absolute;
        right: 20px;
        top: 32px;
      }
    }
  }

  .lineTitle {
    width: 272px;
    height: 29px;
    display: flex;
    align-items: center;
    margin: 63px auto 0;

    .line {
      width: 68px;
      height: 1px;
      background: #2680eb;
    }

    b {
      display: inline-block;
      width: 136px;
      text-align: center;
      font-size: 30px;
      color: #333;
    }
  }

  .cont {
    margin-top: 42px;
    margin-bottom: 60px;
    width: 100%;
    height: 249px;
    border-radius: 15px;
    border: solid 1px #e5e5e5;
    padding: 36px 27px;

    h2 {
      color: #333;
    }

    p {
      color: #666;
    }
  }
}



.enter_cont {
  margin-top: 22px;

  ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-bottom: 0;

    li {
      width: 213px;
      height: 130px;
      border-radius: 5px;
      opacity: 0.9;
      padding-top: 20px;
      padding-left: 20px;
      padding-right: 20px;
      box-sizing: border-box;
      margin-bottom: 12px;

      .port_tit {
        height: 28px;
        font-size: 20px;
        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
        font-weight: 500;
        color: #FFFFFF;
        line-height: 28px;
      }

      .port_time {
        margin-top: 19px;

        p {
          height: 17px;
          font-size: 12px;
          font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
          font-weight: 400;
          color: #FFFFFF;
          line-height: 17px;
        }
      }

      &.technology {
        background: #0291FE;
      }

      &.administration {
        background: #FF8E75;
      }

      &.information {
        background: #5E5DF8;
      }

      &.standard {
        background: #30D499;
      }
    }
  }

  .patent {
    width: 438px;
    height: 130px;
    background: #FAB81E;
    border-radius: 5px;
    opacity: 0.9;
    padding-top: 20px;
    padding-left: 20px;
    padding-right: 36px;
    box-sizing: border-box;

    .port_time {
      display: flex;
      justify-content: space-between;
    }

    .patent_tit {
      height: 28px;
      font-size: 20px;
      font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
      font-weight: 500;
      color: #FFFFFF;
      line-height: 28px;
    }

    .patent_time {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 20px;

      p {
        height: 17px;
        font-size: 12px;
        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
        font-weight: 400;
        color: #FFFFFF;
        line-height: 17px;
      }
    }
  }
}

/deep/.user-layout-login {
  button.login-button {
    width: 434px;
    height: 54px;
    background: linear-gradient(90deg, #3D9CED 0%, #1A60C7 99%, #1A60C7 100%);
    border-radius: 5px;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-align: center;
    align-items: center;
  }
}

.codeimg {
  width: 100%;
  cursor: pointer;
}

.getCaptcha {
  position: absolute;
  right: 3px;
  top: -6px;
  color: #006DC0;
  font-size: 16px;
}

/deep/.ant-form-item {
  margin-bottom: 24px;
}
</style>